<template>
  <div>App
    <p>{{$store.state.username}}</p>
    <p>{{$store.getters['newName']}}</p>
    <button @click="updateFn">mutation</button>
  </div>

</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup() {
    // 使用vuex仓库
    const store = useStore()
    // 使用根模块state的数据
    console.log(store.state.username);
    // 使用根模块getters的数据
    console.log(store.getters.newName);

    const updateFn = () => {
      // 提交根模块mutation函数
      // store.commit('update')
      // 调用根模块actions函数
      store.dispatch('update')
    }

    return { updateFn }
  }
}
</script>
<style lang="less">
</style>
